<template>
    <div>
        <!--el-col将一行分为24份-->
        <el-row>
<!--            {{bannerList}}-->
<!--            [ { "id": 1, "name": "轮播图", "img": null, "link": null } ]-->

            <el-col :span="24">
                <div style="width: 95%">
                    <el-carousel style="height: 350px" :interval="10000" class="swiper" type="card">
                        <el-carousel-item v-for="item in bannerList" :key="item.id">
                                <img style="width: 100%;height:100%" :src="item.img" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>

            </el-col>

        </el-row>
        <!--        Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。-->
        <el-row :gutter="10" style="    margin-bottom: 60px;">
            <el-divider>在线宠物领养系统</el-divider>
            <el-col :span="24">
                <div>
                    <el-divider content-position="left">最新宠物资讯</el-divider>
                    <el-card v-for="item in listData" :key="item.id"
                             style="margin-bottom: 10px;cursor: pointer">
                        <div style="display: flex"  @click="$router.push('/front/detail?id=' + item.id)">
                            <div style="width: 170px;margin-right: 20px">
                                <img :src="item.img" alt="" style="width: 170px; height: 110px;display: block">
                            </div>
                            <div style="flex: 1">
                                <div style="font-size: 17px; text-align: center;">{{ item.name }}</div>
                                <div style=" line-height: 30px">{{ item.removeTag.slice(0, 60) }}……</div>
                                <div style="margin-top:5px;display: flex;justify-content: space-between">
                                    <span><i class="el-icon-view"></i> {{ item.views }}人看过</span>
                                    <span><i class="el-icon-timer"></i> {{ item.createTime }}</span>
                                    <span><i class="el-icon-user-solid"></i> {{ item.user }}</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import utils from "@/utils/utils";

export default {
    data(){
        return {
            bannerList:[
                {img:require("@/assets/banner/banner1.jpg")},
                {img:require("@/assets/banner/banner2.jpg")},
                {img:require("@/assets/banner/banner3.jpg")},
            ],
            listData:[]
        }
    },
    created(){
        this.getNewsList()

    },
    methods:{
        getNewsList() {
            this.request.get("/news/page", {
                params: {
                    pageNum:1,
                    pageSize:5
                }
            }).then(res => {
                this.listData = res.data.list
                this.listData.forEach(v => {
                    v.removeTag = utils.stripHTMLTagsWithRegex(v.content)
                })
                this.total = res.data.total
            })
        },
    }
}
</script>
